<html>
    <!--
      Mix unit value: Motion

      This benchmark mixes simple unit values.
    -->
    <head>
        <style>
            body {
                padding: 0;
                margin: 0;
            }

            .container {
                padding: 100px;
                width: 100%;
                display: flex;
                flex-wrap: wrap;
            }

            .container > div {
                width: 100px;
                height: 100px;
            }

            .box {
                width: 10px;
                height: 100px;
                background-color: red;
                contain: layout;
            }
        </style>
    </head>
    <body>
        <div class="container"></div>
        <script type="module" src="/src/imports/framer-motion-dom.js"></script>
        <script type="module">
            const { motionValue, styleEffect, animate } = window.Motion

            // Create boxes
            const numBoxes = 100
            let html = ``
            for (let i = 0; i < numBoxes; i++) {
                html += `<div><div class="box"></div></div>`
            }
            document.querySelector(".container").innerHTML = html
            const boxes = document.querySelectorAll(".box")

            const options = {
                duration: 100,
                ease: "linear",
            }

            boxes.forEach((box) => {
                const backgroundColor = motionValue("#f00")
                const x = motionValue(0)
                const rotateZ = motionValue(0)
                const width = motionValue(10)

                styleEffect(box, {
                    backgroundColor,
                    x,
                    rotateZ,
                    width,
                })

                // animate(backgroundColor, "#00f", options)
                // animate(x, 100, options)
                // animate(rotateZ, 360, options)
                animate(width, 100, options)
            })
        </script>
    </body>
</html>
